<template>
  <view :class="' ' + (goodDetail.skuStocks.length>1 ? 'specific' :'specific2')">
    <view class="specific__info">
      <image :src="normsData.pic" class="specific__info--image"></image>
      <view class="specific__info--product">
        <view style="display:flex;align-items:flex-end">
          <view class="product__price">
            <span>{{normsData.intPrice}}</span>
            <span style="font-weight:weight;font-size:13px;">.{{normsData.smaPrice}}</span>
          </view>
          <view style="margin-left:20px;display:flex;font-weight: bold;color: #FA5555;font-size: 13px;"
            v-if="normsData.memPrice">
            会员价:
            <view class="product__memPrice">{{normsData.memPrice}}</view>
          </view>
        </view>
        <view class="product__line">
          <view class="product__stock" v-if="goodDetail.skuStocks.length>1">
            <span v-if="normsData.specs">已选：{{normsData.specs}}</span>
            <span v-else>请先选择规格</span>
          </view>
          <view class="product__max">
            <span v-if="goodDetail.skuStocks.length>1 && normsData.perLimit">
              限购{{normsData.perLimit}}件
            </span>
            <span v-if="goodDetail.skuStocks.length===1 && goodDetail.skuStocks[0].perLimit!==0">
              限购{{goodDetail.skuStocks[0].perLimit}}件
            </span>
          </view>
        </view>
      </view>
      <m-icon name="iconshangpinxiangqing-guanbi" size="19px" @tap="onClose"
        style="position:absolute;top:15px;right:15px;"></m-icon>
    </view>
    <view class="select" v-if="goodDetail.skuStocks.length>1">
      <view class="select__title">规格</view>
      <scroll-view scroll-y style="height:200px;overflow:hidden;">
        <view class="select__list">
          <view v-for="(item, index) in goodDetail.skuStocks" :key="index" class="select__list--value "
            @tap="checkNorms" :data-mode="item">
            <view class="select__list--value--info center--middle " style="background-color:#F2F2F2;color:#CDCFD0"
              v-if="item.stock===0">
              {{item.specs}}
            </view>
            <view class="select__list--value--info center--middle "
              :style="'color:' + (item.getType && item.stock>0?'red':'') + ';border:1px solid ' + (item.getType ?'red':'#F2F2F2') + ';background-color:' + (item.getType?'#F6EBEC':'#F2F2F2')"
              v-else>
              {{item.specs}}
            </view>
          </view>
        </view>
      </scroll-view>
    </view>
    <view class="btn" :style="'bottom:' + (goodDetail.skuStocks.length>1 ? '70' : '65') + 'px'">
      <view class="select__title">数量</view>
      <u-number-box v-model="numValue" integer min="1" :max="normsData.maxNum" step="1" @change="onChange"
        input-width="120rpx"></u-number-box>
    </view>
    <view class="poup" v-if="shopCar">
      <view class="poup__btn" @tap="addShopCar" style="width:100%">加入购物车</view>
    </view>
    <view class="poup" v-else>
      <view class="poup__btn" @tap="addShopCar">加入购物车</view>
      <view @tap="addShopCar" :data-index="1" class="poup__btn" style="background-color:#fa5555">
        立即购买
      </view>
    </view>
  </view>
</template>
<script lang='ts'>
  import {
    Component,
    Vue,
    Prop
  } from 'vue-property-decorator'
  import mIcon from "@/components/m-icon/m-icon.vue"
  @Component({
    components: {
      mIcon
    }
  })
  export default class SelectNorms extends Vue {
    numValue: number = 1
    @Prop()
    buyShow: boolean
    @Prop({
      default: {}
    })
    norms: any
    @Prop()
    goodDetail: any
    @Prop()
    state: string
    @Prop()
    buyType: boolean
    @Prop()
    shopCar:boolean

    normsData: any = {}
    created() {
      this.propDataChange()
    }
    mounted(){
      this.propDataChange()
    }
    onClose() {
      this.$emit("onClose", {}, {});
    }
    
    propDataChange() {
      this.setnorms(this.norms)
    }

    setnorms(normsData){
      const goodDetail = this.goodDetail;
      this.numValue = goodDetail.goodsNumber ? goodDetail.goodsNumber : 1
      const norms = {
        ...normsData,
        price:typeof normsData.price === "number" ? normsData.price.toFixed(2) : normsData.price,
        intPrice: normsData.price.split(".")[0],
        smaPrice: normsData.price.split(".")[1]
      };
      if (!norms.maxNum) {
        norms.maxNum =
          norms.perLimit < norms.stock ? norms.perLimit : norms.stock;
        norms.maxNum = norms.perLimit === 0 ? norms.stock : norms.maxNum;
      }
      this.normsData = {...norms}
    }

    checkNorms(e) {
      const goodDetail = this.goodDetail;
      let norms = this.normsData;
      const mode = e.currentTarget.dataset.mode;
      if (mode.stock === 0) {
        uni.showToast({
          title: "此规格暂无库存",
          icon: "none",
        });
        return;
      }
      goodDetail.skuStocks.forEach(item => {
        item.getType = mode.id === item.id ? true : false;
        if (item.getType) {
          norms = item;
        }
      });

      this.numValue = 1
      this.goodDetail = goodDetail
      this.$emit("checkNorms", mode);
      this.setnorms(norms)
    }
    onChange(e) {
      const norms = this.normsData;
      if (e === norms.stock) {
        uni.showToast({
          title:"库存不足",
          icon:"none"
        })
      } else if (e === norms.perLimit) {
        uni.showToast({
          title:"您已达限购数量",
          icon:"none"
        })
      }

      this.numValue = e.detail
      this.$emit("onChange", {}, {});
    }
    /**
     * 加入购物车
     */
    addShopCar(e) {
      this.$store.commit("settingStore/setFormShopCar", false);
      const goodDetail = this.goodDetail;
      const norms = this.normsData;
      if (goodDetail.skuStocks.length === 1) {
        this.soloAdd(goodDetail, e);
        return;
      }
      if (!norms.id) {
        uni.showToast({
          title: "请先选择规格",
          icon: "none"
        });
        return;
      }

      if (norms.stock === 0) {
        uni.showToast({
          title: "此商品暂无库存",
          icon: "none"
        });
        return;
      }
      goodDetail.goodsNumber = this.numValue;
      goodDetail.pic = norms.pic;
      goodDetail.skuId = norms.id;
      goodDetail.skuName = norms.specs;

      this.$emit(
        "addShopCar", {
          goodDetail,
          index: e.currentTarget.dataset.index
        }
      );
    }
    /**
     * 单规格商品
     */
    soloAdd(goodDetail, e) {
      goodDetail.goodsNumber = this.numValue;
      goodDetail.skuId = goodDetail.skuStocks[0].id;
      this.$emit(
        "addShopCar", {
          goodDetail,
          index: e.currentTarget.dataset.index
        }, {},
      );
    }
  }
</script>
<style lang="scss" scoped>
  .center--middle {
    display: flex;
    justify-content: center;
    align-items: center;
  }

  .specific {
    height: 460px;
  }

  .specific2 {
    height: 225px;
  }

  .specific__info {
    width: 100%;
    height: 125px;
    display: flex;
    flex-direction: row;
    padding-left: 30rpx;
    padding-right: 30rpx;
    box-sizing: border-box;
    align-items: flex-end;
  }

  .specific__info--image {
    width: 110px;
    height: 110px;
    // margin-top: 10px;
    // border-radius: 10px;
  }

  .specific__info--product {
    flex: 1;
    margin-left: 15px;
    margin-bottom: 10px;

    .product__price {
      font-size: 17px;
      font-weight: bold;
      color: #FA5555;
    }

    .product__price::before {
      content: '￥';
      font-weight: normal;
      font-size: 13px;
    }

    .product__memPrice {
      font-weight: bold;
      color: #FA5555;
      font-size: 13px;
    }

    .product__memPrice::before {
      content: '￥';
      font-weight: normal;
      font-size: 13px;
    }

    .product__line {
      display: flex;
      margin-top: 12px;
      align-items: center;
    }

    .product__max {
      font-size: 13px;
      color: #FA5555;
    }



    .product__stock {
      height: 30rpx;
      line-height: 30rpx;
      font-size: 13px;
      margin-right: 10px;
    }
  }

  .select {
    padding: 20px 15px 10px 20px;
    font-size: 15px;
  }

  .select__title {
    font-size: 14px;
  }

  .select__list {
    display: flex;
    flex-wrap: wrap;
    margin-top: 10px;
    overflow: auto;
    // height: 160px;
  }

  .select__list::-webkit-scrollbar {
    display: none;
  }

  .select__list--value {
    margin-bottom: 20rpx;
    margin-top: 20rpx;
    margin-right: 20px;

    .select__list--value--info {
      height: 27px;
      border-radius: 50px;
      font-size: 13px;
      padding: 12px;
    }
  }

  .btn {
    padding-left: 30rpx;
    padding-right: 30rpx;
    padding-top: 20rpx;
    padding-bottom: 20rpx;
    font-size: 36rpx;
    display: flex;
    justify-content: space-between;
    height: 60rpx;
    position: fixed;
    width: 100%;
    align-items: center;
    bottom: 80px;
  }

  .poup {
    position: fixed;
    width: 100%;
    display: flex;
    bottom: 0;

    &__btn {
      width: 50%;
      height: 98rpx;
      background-color: #515151;
      text-align: center;
      line-height: 98rpx;
      font-size: 30rpx;
      font-family: MicrosoftYaHei;
      font-weight: 400;
      color: #fff;
    }
  }
</style>